<template>
  <view>
    <Table ref="table" :fetchData="fetchData" :autoFetch="false">
      <template #default="{ data }">
        <view v-for="item in data">
          <uni-card @click="onCardClick(item)">
            <view class="uni-body">
              <view class="title">
                <view class="title-left">
                  <view class="title-title">
                    {{ item.title }}
                  </view>
                  <!-- <span class="title-times"> -->
                  <!-- {{ zypTypes[item.jobType] }} -->
                  <!-- </span> -->
                  <view
                    class="title-state"
                    :style="{
                      backgroundColor: `rgb(248,240,235) !important`,
                      color: 'rgb(197,90,17)',
                    }"
                  >
                    {{ item.state }}
                  </view>
                </view>
              </view>
              <view>
                {{ item.content }}
              </view>
              <view
                style="
                  font-size: 12px;
                  display: flex;
                  justify-content: space-between;
                  width: 100%;
                "
              >
                <text style="color: orange">
                  {{ item.createTime }}
                </text>
                <text style="flex: end">
                  <!-- {{ item.data.zydw }} -->
                </text>
              </view>
            </view>
          </uni-card>
        </view>
      </template>
    </Table>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import Table from "@/components/uniList.vue";
import { useAsyncData } from "@/hooks/useAsyncData.js";
import { apis as APIS } from "@/api/sis.js";
import { router } from "@/router/index.js";
import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
const onCardClick = (item) => {
  router.toPage({
    path: "/pages/sis/detail",
    params: {
      id: item.id,
      type: "sp",
    },
  });
};
const formatList = (rows) => {
  return rows.map((item) => {
    let row = {
      ...item,
      data: JSON.parse(item.detaileds),
    };
    let text = item.approveType == "1" ? "切除" : "恢复";
    let title = `SIS系统联锁${text}审批`;

    let content = `表单：石煤${text}审批`;
    return {
      ...row,
      title,
      content,
    };
  });
};
const table = ref();
const { fetchData, getList, queryParams } = useAsyncData({
  table,
  APIS: {
    ...APIS,
    query: APIS.mysp,
  },
  formatList,
});

onMounted(() => {
  getList();
});
onShow(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.button-box {
  // display: flex;
  position: relative;
  flex-wrap: wrap;
  justify-content: start;
  .mini-btn {
    margin: 0 5rpx;
  }
}
.close {
  position: absolute;
  top: -5rpx;
  right: -25rpx;
  color: skyblue !important;
}
.title {
  display: flex;
  justify-content: space-between;
  position: relative;

  &-left {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  &-title {
    font-weight: 600;
  }
  &-times {
    background-color: rgb(22, 119, 255);
    padding: 2px;
    font-size: 12px;
    line-height: 15px;
    border-top-left-radius: 10px;
    border-bottom-right-radius: 10px;
    margin-left: 5px;
    color: #fff;
  }
  &-state {
    // background-color: orange;
    position: absolute;
    right: 0;
    padding: 2px 5px;
    font-size: 12px;
    line-height: 15px;
    border-radius: 10px;
    margin-left: 5px;
  }
}
</style>
